<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <i class="el-icon-star-off"></i>
            <span>书签总数</span>
          </div>
          <div class="stat-value">{{ stats.bookmarkCount || 0 }}</div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <i class="el-icon-folder"></i>
            <span>分类总数</span>
          </div>
          <div class="stat-value">{{ stats.categoryCount || 0 }}</div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-header">
            <i class="el-icon-view"></i>
            <span>总点击量</span>
          </div>
          <div class="stat-value">{{ stats.totalClicks || 0 }}</div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近添加的书签 -->
    <el-card class="recent-bookmarks" style="margin-top: 20px;">
      <div slot="header">
        <span>最近添加的书签</span>
      </div>
      
      <el-table
        v-loading="loading"
        :data="recentBookmarks"
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="标题"
          min-width="200"
        >
          <template slot-scope="scope">
            <el-link
              :href="scope.row.url"
              target="_blank"
              type="primary"
            >
              {{ scope.row.title }}
            </el-link>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="category.name"
          label="分类"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag
              :style="{ backgroundColor: scope.row.category?.color }"
              size="mini"
            >
              {{ scope.row.category?.name }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column
          prop="clickCount"
          label="点击量"
          width="100"
          align="center"
        ></el-table-column>
        
        <el-table-column
          prop="createdAt"
          label="添加时间"
          width="180"
        >
          <template slot-scope="scope">
            {{ new Date(scope.row.createdAt).toLocaleString() }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getBookmarks } from '@/api/bookmark'
import { getCategories } from '@/api/category'

export default {
  name: 'Dashboard',
  data() {
    return {
      stats: {
        bookmarkCount: 0,
        categoryCount: 0,
        totalClicks: 0
      },
      recentBookmarks: [],
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        // 获取最近添加的书签
        const bookmarksResponse = await getBookmarks({
          limit: 10,
          sort: '-createdAt'
        })
        this.recentBookmarks = bookmarksResponse.data
        
        // 获取分类列表
        const categoriesResponse = await getCategories()
        const categories = categoriesResponse.data
        
        // 更新统计数据
        this.stats = {
          bookmarkCount: bookmarksResponse.total || 0,
          categoryCount: categories.length || 0,
          totalClicks: this.recentBookmarks.reduce((sum, bookmark) => sum + (bookmark.clickCount || 0), 0)
        }
      } catch (error) {
        this.$message.error('获取数据失败')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard {
  .stat-card {
    margin-bottom: 20px;
    
    .stat-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      color: #606266;
      
      i {
        font-size: 20px;
        margin-right: 8px;
      }
    }
    
    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: #303133;
    }
  }
  
  .recent-bookmarks {
    .el-table {
      margin: -12px;
    }
  }
}
</style> 